<template>
  <div class="box">
    <el-form
      :model="form"
      ref="ruleFormRef"
      label-position="right"
      label-width="90px"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="姓名:" required prop="cname">
        <el-input v-model="form.cname" />
      </el-form-item>
      <el-form-item label="用户名:" required prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item v-if="title == '用户新增'" label="密码:" required prop="password">
        <el-input type="password" show-password v-model="form.password" />
      </el-form-item>
      <el-form-item label="性别:" required prop="gender">
        <el-radio-group @change="changeGender" v-model="form.gender" class="radio">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" required prop="birth">
        <el-date-picker
          v-model="form.birth"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          clearable
          @change="handleDate"
        />
      </el-form-item>
      <el-form-item label="所属单位:" required prop="orgname">
        <popup-tree-input
          :data="store.state.system.orgList"
          :current-change-handle="handleAffiliatedUnit"
          :prop="form.orgname"
          :props="{
            label: 'name',
          }"
        />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { onBeforeUnmount, reactive, ref } from 'vue'
import PopupTreeInput from '@/views/system/components/PopupTreeInput/index.vue'
import { useStore } from 'vuex'
import JSEncrypt from '@/utils/jsencrypt'
import { RSA_PUBLIC_KEY, ZZ_PRIVATE_KEY } from '@/constants'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'

export default {
  components: {
    PopupTreeInput,
  },
  props: {
    title: {
      type: String,
    },
  },
  setup(props) {
    const store = useStore()
    const ruleFormRef = ref()
    const form = store.state.system.userForm
    console.log(form, 'form')
    const rules = reactive({
      cname: { required: true, message: '请填写姓名' },
      username: { required: true, message: '请填写用户名' },
      password: { required: true, message: '请填写密码' },
      gender: { required: true, message: '请选择性别' },
      birth: { required: true, message: '请选择出生日期' },
      orgname: { required: true, message: '请选择所属单位' },
      email: [
        {
          pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
          message: '请输入正确的邮箱号',
        },
      ],
      phone: [
        {
          pattern: /^1[3456789]\d{9}$/,
          message: '请输入正确的手机号',
        },
      ],
    })
    if (props.title == '用户编辑') {
      delete form.password
    }

    const handleDate = (val) => {
      console.log(val, 'handleDate')
    }
    const handleAffiliatedUnit = (item) => {
      console.log(item, 'handleAffiliatedUnit')
      form.unitOrg = item.id
      form.orgname = item.name
    }
    const changeGender = (val) => {
      console.log(val)
      if (val == 0) {
        form.gendertext = '女'
      } else if (val == 1) {
        form.gendertext = '男'
      }
    }
    //加密方法
    const encryption = (params) => {
      console.log(params, '加密之前')
      const encrypt = new JSEncrypt()
      encrypt.setPublicKey(RSA_PUBLIC_KEY)
      const encryptPassword = encrypt.encrypt(JSON.stringify(params))
      console.log(encryptPassword, '加密之后')
      return encryptPassword
    }
    // 解密方法
    const decrypt = (params) => {
      const decrypt = new JSEncrypt()
      decrypt.setPrivateKey(ZZ_PRIVATE_KEY)
      const encryptPassword = decrypt.decrypt(params)
      console.log(encryptPassword, '解密之后')
      return encryptPassword
    }
    decrypt(encryption(form.password))
    const submitForm = () => {
      let result = {}
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          decrypt(encryption(form.password))

          if (form.password && props.title == '用户新增') {
            form.password = encryption(form.password)
          }
          result = true
        } else {
          ElMessage({
            message: '请将基本信息补充完整',
            type: 'warning',
          })
          result = false
        }
      })
      return result
    }
    onBeforeUnmount(() => {
      for (let key in form) {
        form[key] = ''
      }
    })
    return {
      form,
      rules,
      store,
      ruleFormRef,
      submitForm,
      handleDate,
      changeGender,
      handleAffiliatedUnit,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
  width: 80%;
  margin: 0 auto;
  .el-form-item {
    width: 80%;
  }
}
.radio {
  display: flex;
  margin-top: 10px;
}
</style>
